import { computed, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useList } from './use-list';
interface UseTableOptions {
  type?: string; // 系统类型
  params?: any; // 参数
  getList?: any; // 获取列表接口
  getParams: (params: any, data?: any) => any;
  // onDel?: any;
  // onEdit?: any;
  // onView?: any;
  // onAdd?: any;
  changeState?: (row: any) => any;
  pages?: any;
  getListOnInit?: boolean; // 初始化加载数据
  usePagination?: boolean;
  useScrollTop?: boolean | number | Function; // 切换分页和排序时滚动到顶部
  columns?: any[]; // 默认列配置
}

/** useTable: 通用表格 */
export const useTable = (options: UseTableOptions) => {
  const {
    type,
    params,
    pages,
    usePagination,
    getListOnInit,
    getParams,
    columns,
    getList: optGetList
  } = options;

  // 列表业务 逻辑
  const { state, getList, setList, onSearch, onReset, onPageChange, onSizeChange, getParams: getParamsData }: any = useList({
    type,
    params,
    pages,
    getList: (queryParams: any, queryBody: any) => {
      state.selectedList = [];
      return optGetList(queryParams, queryBody);
    },
    getParams,
    usePagination: usePagination !== false
  });

  // 初始化表格相关状态字段
  state.selectedList = [];
  state.columns = columns || [];
  state.showPagination = usePagination !== false;
  state.defaultSort = {};

  // defaultSort: 通过params.sort_field & params.sort 设置默认排序对象
  if (params && params.sort_field) {
    state.defaultSort = { prop: params.sort_field };
    if (params.sort !== undefined) {
      state.defaultSort.order = params.sort === 1 ? 'ascending' : 'descending';
    }
  }

  // === 监听事件 ===

  // 默认的排序改变
  // TODO: 暂未使用
  const sortMap = {
    descending: 0, // 降序
    ascending: 1 // 升序
  };
  const onSortChange = (sortData: any) => {
    // 排序变化
    const { prop, order } = sortData;
    if (prop && order) {
      if (prop === state.params.sort_field && state.params.sort === sortMap[order as keyof typeof sortMap]) return;
      state.params.sort_field = prop;
      state.params.sort = order === 'descending' ? 0 : 1;
    } else {
      state.params.sort_field = undefined,
      state.params.sort = undefined;
    }
    onSearch();
  };

  const onSelectionChange = (selectedList: any[]) => {
    state.selectedList = selectedList || [];
  };

  if (getListOnInit !== false) onSearch();

  // k-table消费 state
  const tableState = computed(() => ({
    data: state.list,
    columns: state.columns,
    pages: state.pages,
    loading: state.loading
  }));

  // k-table消费 event
  const tableEvent = {
    pageChange: onPageChange,
    sizeChange: onSizeChange,
    sortChange: onSortChange,
    selectionChange: onSelectionChange
  };
  return {
    state,
    tableState,
    tableEvent,
    setList,
    getList,
    onSearch,
    onReset,
    onPageChange,
    onSortChange,
    onSelectionChange,
    getParams: getParamsData
    // onClickAdd,
    // onClickEdit,
    // onClickDel,
    // onClickView
  };
};

// 确认弹框
export const baseConfirm = (message: string, options: any = {}) => {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm(
      message,
      options.title || '提示',
      {
        type: options.type || 'warning',
        confirmButtonText: options.confirmButtonText || '确定',
        cancelButtonText: options.cancelButtonText || '取消'
      }
    )
      .then(resolve)
      .catch(reject);
  });
};

export const delConfirm = (message: string, options: any = {}) => baseConfirm(message, { type: 'error', confirmButtonText: '删除', cancelButtonText: '取消', options });
